<template>
  <div class="login">
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">{{title}}</h3>
      <el-form-item prop="phone">
        <el-input
            v-model="loginForm.phone"
            type="text"
            auto-complete="off"
            placeholder="账号"
            :prefix-icon="User"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="loginPassword">
        <el-input
            v-model="loginForm.loginPassword"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleLogin"
            :prefix-icon="Lock"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
            v-model="loginForm.code"
            placeholder="验证码"
            style="width: 63%"
        >
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleLogin"
        >
          登 录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import { ref, reactive } from "vue";
  import { useRouter } from "vue-router";
  import { User, Lock } from "@element-plus/icons-vue/global";
  import { getVerifyCode } from "../api/vc.js";
  import { login } from "../api/user.js";
  import { ElMessage } from 'element-plus'
  import md5 from "md5";

  console.log(md5);
  console.log(md5("123"));

  // 获取全局路由
  const router = useRouter();

  // 定义标题
  const title = ref('盈利宝后台管理界面');

  // 表单的引用
  const loginFormRef = ref("");

  const loginForm  = reactive({
    phone: "13913391111",
    loginPassword: "123",
    code: "",
    uuid: ""
  });

  const  loginRules  = reactive({
    phone: [
      { required: true, trigger: "blur", message: "请输入您的账号" }
    ],
    loginPassword: [
      { required: true, trigger: "blur", message: "请输入您的密码" }
    ],
    code: [
        { required: true, trigger: "blur", message: "请输入验证码" }
    ]
  });

  // 展示验证码
  const captchaEnabled = ref(true);

  const loading = ref(false);

  const codeUrl = ref('');

  // 调用后端接口完成登录功能
  const handleLogin = async ()=>{
    console.log("handleLogin");
    const {data: res} = await login({
      phone: loginForm.phone,
      loginPassword: md5(loginForm.loginPassword),
      code: loginForm.code,
      uuid: loginForm.uuid
    });
    console.log(res);
    // 如果登录成功需要将token存放到sessionStorage中
    if (res["code"] === 1000) {
      // 登录成功
      ElMessage({
        message: res["msg"],
        type: 'success',
      });
      // 将token存放到sessionStorage中
      window.sessionStorage.setItem("token", res["data"]);
      // 登录成功跳转到系统的首页
      router.push("/");
    } else {
      // 登录失败
      ElMessage({
        message: res["msg"],
        type: 'warning',
      })
    }
  };

  // 获取验证码
  const getCode = async ()=>{
    console.log("getCode");
    // 发送异步请求获取验证码图片
    const { data: res } = await getVerifyCode();
    console.log(res);
    codeUrl.value = "data:image/jpeg;base64," + res["data"]["imageUrl"];
    loginForm.uuid = res["data"]["uuid"];
    loginForm.code = '';
  };

  // 默认直接调用获取验证码方法
  getCode();

</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  z-index: 1;
}
.login-form .el-input {
  height: 38px;
}
.login-form .el-input input {
  height: 38px;
}

.login-form .input-icon {
  height: 39px;
  width: 14px;
  margin-left: 2px;
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 37px;
  float: right;
}
.login-code img {
  cursor: pointer;
  vertical-align: middle;
}
.login-code-img {
  height: 37px;
}
</style>